<template>
  <div style="height: 400px" ref="homeLineRef"></div>
</template>

<script setup name="LINE">
import * as echarts from 'echarts';

const props = defineProps({
  line_x: {
    type: Array,
    default: () => [],
  },
  lineData: {
    type: Array,
    default: () => [],
  },
});
// 引入组件
const homeLineRef = ref();
let line;
//柱状图
const initLineChart = () => {
  line = markRaw(echarts.init(homeLineRef.value, ''));
  const option = {
    title: {
      text: '',
      subtext: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['一级', '二级','三级','四级']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['2023-01', '2023-02'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '一级',
        type: 'bar',
        data: [10, 30, 27, 25, 20, 19, 2],

      },
      {
        name: '二级',
        type: 'bar',
        data: [50, 60, 35, 40, 30, 45, 2],
      },
      {
        name: '三级',
        type: 'bar',
        data: [50, 60, 35, 40, 30, 45, 2],
      },
      {
        name: '四级',
        type: 'bar',
        data: [50, 60, 35, 40, 30, 45, 2],
      },
    ],
  };
  line.setOption(option);
};

onMounted(() => {
  nextTick(()=> {
    initLineChart();
  });
});
</script>
